<template>
  <el-card>
    <template #header>
      <div style="display:flex;gap:12px;align-items:center;">
        <el-input v-model="query.username" placeholder="用户名" style="width:220px"/>
        <el-button type="primary" @click="load">查询</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="success" @click="openEdit()">新增</el-button>
        <el-button type="danger" :disabled="!multipleSelection.length" @click="batchRemove">批量删除</el-button>
      </div>
    </template>

    <el-table :data="list" @selection-change="multipleSelection=$event">
      <el-table-column type="selection" width="48"/>
      <el-table-column prop="id" label="ID" width="80"/>
      <el-table-column prop="username" label="用户名"/>
      <el-table-column prop="nickName" label="昵称"/>
      <el-table-column prop="age" label="年龄" width="80"/>
      <el-table-column prop="sex" label="性别" width="80"/>
      <el-table-column prop="role" label="角色" width="100"/>
      <el-table-column label="操作" width="180">
        <template #default="{row}">
          <el-button size="small" @click="openEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="remove(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="page.pageNum"
      v-model:page-size="page.pageSize"
      :total="page.total"
      layout="prev, pager, next, jumper, total, sizes"
      :page-sizes="[10,20,50,100]"
      @current-change="load"
      @size-change="load"
      class="mt-3"
    />

    <el-dialog v-model="visible" :title="form.id ? '编辑' : '新增'" width="600px">
      <el-form :model="form" label-width="120px">
        <el-form-item label="用户名"><el-input v-model="form.username"/></el-form-item>
        <el-form-item label="密码"><el-input v-model="form.password" type="password"/></el-form-item>
        <el-form-item label="昵称"><el-input v-model="form.nickName"/></el-form-item>
        <el-form-item label="年龄"><el-input v-model.number="form.age"/></el-form-item>
        <el-form-item label="性别"><el-input v-model="form.sex"/></el-form-item>
        <el-form-item label="角色"><el-input v-model.number="form.role"/></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="visible=false">取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'

const list = ref<any[]>([])
const page = reactive({ pageNum: 1, pageSize: 10, total: 0 })
const query = reactive({ username: '' })
const visible = ref(false)
const form = reactive<any>({})
const multipleSelection = ref<any[]>([])

async function load() {
  const { data } = await axios.get('/api/admin/user/page', { params: { pageNum: page.pageNum, pageSize: page.pageSize, username: query.username } })
  list.value = data.records || []
  page.total = data.total || 0
}
function reset(){ Object.assign(query, { username:'' }); load() }
function openEdit(row?: any){ Object.assign(form, row||{}); visible.value=true }
async function submit(){ if(form.id){ await axios.put('/api/admin/user', form) } else { await axios.post('/api/admin/user', form) } visible.value=false; load() }
async function remove(id:number){ await axios.delete(`/api/admin/user/${id}`); load() }
async function batchRemove(){ await axios.post('/api/admin/user/batchDelete', multipleSelection.value.map(x=>x.id)); load() }

onMounted(load)
</script>

